import React, { useEffect, useState } from 'react';
import {
  DatabaseFilled,
  AppstoreFilled,
  FileZipFilled,
  MacCommandFilled,
  CalendarFilled
} from '@ant-design/icons';
import { Menu } from 'antd';
function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}
const items = [
  getItem('首页', '/main/home', <AppstoreFilled />),
  getItem('系统管理', 'system', <DatabaseFilled />, [
    getItem('品牌管理', '/main/brand', <MacCommandFilled />),
    getItem('购物车', '/main/cart', <CalendarFilled />)
  ]),
  getItem('资料维护', 'info', <FileZipFilled />, [
    getItem('用户中心', '/main/ucenter')
  ]),
];
// 自定义侧边栏导航组件
const CusHeader = (props) => {
  // useState 函数式组件中添加状态数据的辅助函数
  const [theme, setTheme] = useState('dark');
  const [current, setCurrent] = useState('1');
  const changeTheme = (value) => {
    setTheme(value ? 'dark' : 'light');
  };

  console.log(props.history.location.pathname, "侧边栏导航路由属性")
  // setCurrent(props.history.location.pathname)

  // useEffect 函数式组件中，模拟生命周期的辅助函数
  // useEffect(() => {
  //   // setCurrent(props.history.location.pathname)
  //   console.log(props, "导航组件")
  // })


  const onClick = (e) => {
    // console.log('click ', e);
    setCurrent(e.key);
    // 通过编程式导航(this.props.history.push())，完成页面跳转
    props.history.push(e.key)
  };

  const onSelect = e => {
    console.log("默认选中菜单", e)
  }

  return (
    <>
      {/* <Switch
        checked={theme === 'dark'}
        onChange={changeTheme}
        checkedChildren="Dark"
        unCheckedChildren="Light"
      />
      <br />
      <br /> */}
      <Menu
        theme={theme}
        onClick={onClick}
        onSelect={onSelect}
        style={{
          width: 256,
          height: '100%'
        }}
        defaultOpenKeys={['system', 'info']}
        selectedKeys={[props.history.location.pathname]}
        mode="inline"
        items={items}
      />
    </>
  );
};
export default CusHeader;